<template>
	<view class="multiple-search">
		<view class="multiple-search-header">
			<view class="toolbar">
				<view class="toolbar__inner">
					<view class="toolbar__city" @click="handleToggleCity">{{city}}</view>
					<view class="toolbar__search">
						<u-search placeholder="请输入车名" shape="square" v-model="keyword" :show-action="false"></u-search>
					</view>
				</view>
				<view class="toolbar__inner">
					<view class="toolbar-nav">
						<view class="toolbar-nav__item" @click="handleToggleBrand">
							{{brand||'品牌'}}
						</view>
						<view class="toolbar-nav__item">
							价格
						</view>
						<view class="toolbar-nav__item">
							更多筛选
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="multiple-search-content">
			<view class="price">
				<view class="price-tags">
					<view class="price-tags__tag" v-for="(tag,index) in priceTags" :key="index">
						{{tag}}
					</view>
				</view>
				<view class="price-range">
					<view class="price-range__title">自定义价格(万元)</view>
					<view class="price-slider">
						<view class="price-slider-count">
							<view class="price-slider-count__point">10</view>
							<view class="price-slider-count__point">20</view>
							<view class="price-slider-count__point">30</view>
							<view class="price-slider-count__point">40</view>
							<view class="price-slider-count__point">50</view>
						</view>
						<view class="price-slider-bar">
							<view class="price-slider-bar__cursor price-slider-bar__cursor-left" :style="{left:`${slider.cursorLeft}rpx`}" @touchmove="handleCursorChange">
								<view class="price-slider-bar__triangle"></view>
								<view class="price-slider-bar__text">0</view>
							</view>
							<view class="price-slider-bar__cursor price-slider-bar__cursor-right" :style="{left:`${slider.cursorRight}rpx`}" @touchmove="handleCursorChange">
								<view class="price-slider-bar__triangle"></view>
								<view class="price-slider-bar__text">50+</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'MultipleSearch',
		data(){
			return {
				kewords:'',
				city:'全国',
				brand:'',
				priceTags:['不限','0~3万','3~5万','5~10万','10~15万','15~20万','20~30万','30~50万','50万以上'],
				
				slider:{
					sliderBarLeft:0,
					cursorLeft:0,
					cursorRight:0
				}
			}
		},
		computed:{
			DRPR(){
				return uni.getSystemInfoSync().windowWidth / 750
			}
		},
		methods:{
			handleCursorChange(e){
				const {pageX,pageY} = e.changedTouches[0]
				const cursorLeft = pageX / this.DRPR - this.slider.sliderBarLeft 
				if(cursorLeft < 0) return 
				this.slider.cursorLeft = cursorLeft
				console.log(cursorLeft)
				console.log('pageX:',pageX / this.DRPR,'pageY:',pageY / this.DRPR)
			},
			handleToggleCity(){
				uni.navigateTo({
					url:'/pages/new-car/component/city-model/city'
				})
				uni.$once('city-change',city=>{
					this.city = city
				})
			},
			handleToggleBrand(){
				uni.navigateTo({
					url:'/pages/used-car/brand-list'
				})
				uni.$once('brand-change',brand=>{
					this.brand = brand.name
				})
			}
		},
		mounted(){
			this.city = uni.getStorageSync('position')
			const query = uni.createSelectorQuery().in(this)
			query.select('.price-slider-bar').boundingClientRect(rect=>{
				console.log(rect)
				this.slider.sliderBarLeft = rect.left
				this.slider.sliderBarRight = rect.right
				console.log(this.slider.rect)
			}).exec()
		}
	}
</script>

<style lang="scss">
	.multiple-search-header{
		background-color: #FFFFFF;
	}
	.toolbar{
		&__inner{
			display: flex;
			align-items: center;
			padding: 25rpx 30rpx;
			&+&{
				box-shadow: 0 -1rpx 0.5rpx -1rpx #CCCCCC;
			}
		}
		&__city{
			font-size: 28rpx;
			font-weight: 400;
			color: #000000;
			margin-right: 30rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		&__search{
			flex: 1;
		}
	}
	.toolbar-nav{
		flex: 1;
		display: flex;
		&__item{
			flex: 1;
			display: flex;
			justify-content: center;
			color: #343434;
			font-size: 28rpx;
			font-weight: 400;
		}
	}
	
	.multiple-search-content{
		position: relative;
	}
	.price{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 9;
		background-color: #FFFFFF;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
	}
	.price-tags{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		&__tag{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 80rpx;
			background-color: #FCF5F5;
			font-size: 30rpx;
			color: #333333;
			font-weight: 400;
			border-radius: 10rpx;
			margin-bottom: 40rpx;
			&--active{
				color: #FFE74438;
				background-color: #FFE6E6;
			}
		}
	}
	.price-slider{
		padding: 30rpx;
	}
	.price-slider-bar{
		width: 100%;
		height: 10rpx;
		background-color: #E74438;
		position: relative;
		&__cursor{
			position: absolute;
			cursor: pointer;
			top: 15rpx;
			&-left{
				margin-left: -20rpx;
			}
			&-right{
				margin-right: -20rpx;
			}
		}
		&__triangle{
			position: relative;
			width: 50rpx;
			height: 50rpx;
			background-color:#E74438;
			border-top-right-radius: 80%;
			transform: rotate(-60deg) skewX(-30deg) scale(1,.866);
			&::before,&::after{
				top: 0;
				content: "";
				position: absolute;
				background-color: inherit;
				width: 50rpx;
				height: 50rpx;
				border-top-right-radius: 80%;
			}
			&::before{
				transform: rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);
			}
			&::after{
				transform: rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);
			}
		}
		&__text{
			top: 45%;
			left: 50%;
			transform:translateX(-50%);
			position: absolute;
			font-size: 22rpx;
			color: #FFFFFF;
			font-weight: 400;
		}
	}
	.price-slider-count{
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;
		color: #CCCCCD;
		font-weight: 400rpx;
		&::after,&::before{
			content: "";
			display: block;
		}
		&__point{
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20rpx;
			&::after{
				content: "";
				display: block;
				height: 15rpx;
				width: 4rpx;
				background-color: #CCCCCD;
			}
		}
	}

</style>
